<!--
 * @Author: wrngygy
 * @Date: 2025-07-01
 * @Description: Vue 3 媒体查询使用示例组件
-->

<template>
	<div class="media-query-example">
		<el-card>
			<template #header>
				<h3>Vue 3 媒体查询使用示例</h3>
			</template>

			<!-- 方法1: 使用 Composable 函数 -->
			<el-row :gutter="20" class="mb-4">
				<el-col :span="24">
					<h4>方法1: 使用 Composable 函数</h4>
					<el-descriptions :column="2" border>
						<el-descriptions-item label="屏幕宽度">
							{{ screenSize.width }}px
						</el-descriptions-item>
						<el-descriptions-item label="屏幕高度">
							{{ screenSize.height }}px
						</el-descriptions-item>
						<el-descriptions-item label="设备类型">
							{{ breakpoints.deviceType }}
						</el-descriptions-item>
						<el-descriptions-item label="是否移动设备">
							{{ breakpoints.isMobile ? '是' : '否' }}
						</el-descriptions-item>
						<el-descriptions-item label="是否平板">
							{{ breakpoints.isTablet ? '是' : '否' }}
						</el-descriptions-item>
						<el-descriptions-item label="是否桌面">
							{{ breakpoints.isDesktop ? '是' : '否' }}
						</el-descriptions-item>
					</el-descriptions>
				</el-col>
			</el-row>

			<!-- 方法2: 设备特性检测 -->
			<el-row :gutter="20" class="mb-4">
				<el-col :span="24">
					<h4>方法2: 设备特性检测</h4>
					<el-space wrap>
						<el-tag :type="deviceFeatures.isDarkMode ? 'success' : 'info'">
							{{ deviceFeatures.isDarkMode ? '深色模式' : '浅色模式' }}
						</el-tag>
						<el-tag :type="deviceFeatures.isTouchDevice ? 'warning' : 'info'">
							{{ deviceFeatures.isTouchDevice ? '触摸设备' : '非触摸设备' }}
						</el-tag>
						<el-tag :type="deviceFeatures.isRetina ? 'success' : 'info'">
							{{ deviceFeatures.isRetina ? '高分辨率屏幕' : '普通屏幕' }}
						</el-tag>
						<el-tag :type="deviceFeatures.isLandscape ? 'warning' : 'info'">
							{{ deviceFeatures.isLandscape ? '横屏' : '竖屏' }}
						</el-tag>
						<el-tag :type="deviceFeatures.canHover ? 'success' : 'danger'">
							{{ deviceFeatures.canHover ? '支持悬停' : '不支持悬停' }}
						</el-tag>
					</el-space>
				</el-col>
			</el-row>

			<!-- 方法3: 响应式组件 -->
			<el-row :gutter="20" class="mb-4">
				<el-col :span="24">
					<h4>方法3: 响应式组件布局</h4>
					<div class="responsive-grid">
						<div
							v-for="i in 6"
							:key="i"
							class="grid-item"
							:class="{
								'mobile-item': breakpoints.isMobile,
								'tablet-item': breakpoints.isTablet,
								'desktop-item': breakpoints.isDesktop,
							}"
						>
							<el-card shadow="hover">
								<div class="item-content">
									<h5>卡片 {{ i }}</h5>
									<p>{{ getItemDescription(i) }}</p>
								</div>
							</el-card>
						</div>
					</div>
				</el-col>
			</el-row>

			<!-- 方法4: 条件渲染 -->
			<el-row :gutter="20" class="mb-4">
				<el-col :span="24">
					<h4>方法4: 条件渲染</h4>
					<div class="conditional-content">
						<!-- 移动端显示 -->
						<div v-if="breakpoints.isMobile" class="mobile-content">
							<el-alert
								title="移动端视图"
								type="info"
								description="这是专为移动设备优化的内容"
								show-icon
							/>
							<el-button-group class="mobile-buttons">
								<el-button size="small">按钮1</el-button>
								<el-button size="small">按钮2</el-button>
							</el-button-group>
						</div>

						<!-- 平板显示 -->
						<div v-else-if="breakpoints.isTablet" class="tablet-content">
							<el-alert
								title="平板视图"
								type="warning"
								description="这是专为平板设备优化的内容"
								show-icon
							/>
							<el-space>
								<el-button>按钮1</el-button>
								<el-button>按钮2</el-button>
								<el-button>按钮3</el-button>
							</el-space>
						</div>

						<!-- 桌面显示 -->
						<div v-else class="desktop-content">
							<el-alert
								title="桌面视图"
								type="success"
								description="这是专为桌面设备优化的内容，包含更多功能"
								show-icon
							/>
							<el-space>
								<el-button type="primary">主要按钮</el-button>
								<el-button type="success">成功按钮</el-button>
								<el-button type="warning">警告按钮</el-button>
								<el-button type="danger">危险按钮</el-button>
								<el-button type="info">信息按钮</el-button>
							</el-space>
						</div>
					</div>
				</el-col>
			</el-row>

			<!-- 方法5: 容器查询模拟 -->
			<el-row :gutter="20" class="mb-4">
				<el-col :span="24">
					<h4>方法5: 容器查询模拟</h4>
					<div ref="containerRef" class="container-query-demo">
						<p>容器宽度: {{ containerQuery.width }}px</p>
						<div class="container-content" :class="containerClasses">
							<p v-if="containerQuery.sm">小容器布局 (≥400px)</p>
							<p v-if="containerQuery.md">中等容器布局 (≥600px)</p>
							<p v-if="containerQuery.lg">大容器布局 (≥800px)</p>
						</div>
					</div>
				</el-col>
			</el-row>

			<!-- 实时调试信息 -->
			<el-row :gutter="20">
				<el-col :span="24">
					<h4>实时调试信息</h4>
					<el-collapse>
						<el-collapse-item title="断点信息" name="breakpoints">
							<pre>{{ JSON.stringify(breakpoints.breakpoints, null, 2) }}</pre>
						</el-collapse-item>
						<el-collapse-item title="设备特性" name="features">
							<pre>{{
								JSON.stringify(deviceFeatures.deviceFeatures, null, 2)
							}}</pre>
						</el-collapse-item>
						<el-collapse-item title="屏幕信息" name="screen">
							<pre>{{ JSON.stringify(screenSize.screenSize, null, 2) }}</pre>
						</el-collapse-item>
					</el-collapse>
				</el-col>
			</el-row>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
	useBreakpoints,
	useDeviceFeatures,
	useScreenSize,
	useContainerQuery,
} from '@/hooks/useMediaQuery'

// 使用 Composable 函数
const breakpoints = useBreakpoints() as any
const deviceFeatures = useDeviceFeatures() as any
const screenSize = useScreenSize() as any
console.log('breakpoints', breakpoints)
console.log('deviceFeatures', deviceFeatures)
console.log('screenSize', screenSize)

// 容器查询
const containerRef = ref()
const containerQuery = useContainerQuery(containerRef, {
	sm: 400,
	md: 600,
	lg: 800,
}) as any
console.log('containerQuery', containerQuery)

// 计算属性
const containerClasses = computed(() => ({
	'container-sm': containerQuery.sm,
	'container-md': containerQuery.md,
	'container-lg': containerQuery.lg,
}))

// 方法
const getItemDescription = (index: number) => {
	if (breakpoints.isMobile.value) {
		return `移动端卡片 ${index}`
	} else if (breakpoints.isTablet.value) {
		return `平板端卡片 ${index} - 中等尺寸`
	} else {
		return `桌面端卡片 ${index} - 完整功能版本`
	}
}
</script>

<style scoped>
.media-query-example {
	padding: 20px;
}

.mb-4 {
	margin-bottom: 20px;
}

/* 响应式网格 */
.responsive-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-item {
	transition: all 0.3s ease;
}

.mobile-item {
	grid-column: span 1;
}

.tablet-item {
	grid-column: span 1;
}

.desktop-item {
	grid-column: span 1;
}

.item-content {
	text-align: center;
	padding: 10px;
}

.item-content h5 {
	margin: 0 0 8px 0;
	color: #409eff;
}

.item-content p {
	margin: 0;
	font-size: 14px;
	color: #666;
}

/* 条件内容样式 */
.conditional-content {
	margin-top: 16px;
}

.mobile-content,
.tablet-content,
.desktop-content {
	padding: 16px;
	border-radius: 8px;
	background: #f8f9fa;
}

.mobile-buttons {
	margin-top: 12px;
	width: 100%;
}

.mobile-buttons .el-button {
	flex: 1;
}

/* 容器查询演示 */
.container-query-demo {
	border: 2px dashed #ddd;
	padding: 20px;
	resize: horizontal;
	overflow: auto;
	min-width: 300px;
	max-width: 100%;
	background: #f5f7fa;
}

.container-content {
	padding: 16px;
	background: white;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.container-content.container-sm {
	background: #e3f2fd;
}

.container-content.container-md {
	background: #fff3e0;
}

.container-content.container-lg {
	background: #e8f5e8;
}

/* 媒体查询示例 */
@media (max-width: 768px) {
	.responsive-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.media-query-example {
		padding: 10px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.responsive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.responsive-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 打印样式 */
@media print {
	.conditional-content,
	.container-query-demo {
		display: none;
	}
}
</style>
